<template>
  <a-table :columns="tableColumn" :pagination="false" :data-source="tableData" bordered  :scroll="{x:1000}">
    <template #content="{record}">
      <a-tooltip placement="topLeft" :title="record.content">
        <div style=" white-space: nowrap;overflow: hidden; text-overflow: ellipsis;"> {{
            record.content
          }}
        </div>
      </a-tooltip>
    </template>
    <template #operate="{record}">
      <a-button type="link" @click="editCard(record)">{{ $t('备注') }}</a-button>
    </template>
  </a-table>
  <a-modal v-model:visible="visibleRemark" :title="$t('备注')" @ok="remarkConfirm" @cancel="closeForm">
    <a-form :model="form" :rules="rulesForm" ref="formRef">
      <a-form-item :label="$t('反馈内容')">
        {{ tableRows.content }}
      </a-form-item>
      <a-form-item :label="$t('备注')" name="remark">
        <a-textarea v-model:value="form.remark" :rows="5"></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {createVNode, onMounted, reactive, ref} from "vue";
import locale from "@/locale";
import {updateBankCard, getOrderDetailsUserBank, addUserProblem, getUserProblem, updateIsRead} from "@/api/order"
import {useRoute} from "vue-router"
import {Image,ImagePreviewGroup} from 'ant-design-vue'

const {t} = locale.global;
const tableColumn = [
  {title: t('反馈时间'), dataIndex: 'createTime', align: 'center',width:200,},
  {title: t('反馈内容'), dataIndex: 'content', align: 'center',width:250,  slots: {customRender: 'content',}},
  {
    title: t('图片'), dataIndex: 'img1', align: 'center', customRender: ({text}) => {
      if (text) {
        const arr = text.split(',')
        return arr.map(item => {
          return createVNode(Image, {
            style: {
              width:'80px',
              height:'80px',
              marginRight:'10px',
              marginBottom:'10px'
            },
            src: item,
          })
        })
      }
    },width:250,
  },
  {title: t('客服'), dataIndex: 'employeeName', align: 'center',width:200,},
  {title: t('备注'), dataIndex: 'remark', align: 'center',width:200,},
  {title: t('备注时间'), dataIndex: 'remarkTime', align: 'center',width:200,},
  {title: t('操作'), align: 'center', slots: {customRender: 'operate',},width:200,},
]
import {message} from "ant-design-vue"

export default {
  name: "index",
  setup() {
    const tableData = ref([])
    const route = useRoute()
    const {loanRecordId} = route.query
    const formRef = ref(null)
    const tableRows = ref({})
    const rulesForm = {
      remark: {
        required: true, trigger: 'blur', message: t('不能为空')
      },
    }
    const form = reactive({
      remark: null
    })
    const visibleRemark = ref(false)

    async function getTableData() {
      const res = await getUserProblem({loanRecordId})
      if (res.code === 1) {
        tableData.value = res.data
      }
    }

    function editCard(record) {
      tableRows.value = {...record}
      visibleRemark.value = true
    }

    async function remarkConfirm() {
      formRef.value.validate().then(async (v) => {
        const res = await addUserProblem({
          ...form,
          id: tableRows.value.id,
          loanRecordId
        })
        if (res.code === 1) {
          visibleRemark.value = false
          message.success(t('操作成功'))
          getTableData()
        }
      })
    }

    function closeForm() {
      formRef.value.resetFields()
    }

    onMounted(() => {
      getTableData()
      // 设置已读
      updateIsRead({loanRecordId})
    })
    return {
      form,
      remarkConfirm,
      visibleRemark,
      editCard,
      tableRows,
      formRef,
      closeForm,
      rulesForm,
      tableColumn,
      tableData
    }
  }
}
</script>

<style scoped>

</style>
